<template>
	<view class="identity" v-if="!haveData">
		<view class="topRule p20">根据《互联网论坛社区服务管理规定》要求，用户须完成身份认证后，才能发布信息。</view>
		<view class="form">
			<up-form labelPosition="left" :model="form" :rules="rules" ref="formDom">
				<up-form-item label="认证学校" prop="school" labelWidth="150rpx" required :borderBottom="true">
					<up-input v-model="schoolInfo.schoolName" disabled placeholder="请填写学校" border="none"></up-input>
				</up-form-item>
				<up-form-item label="姓名" prop="name" labelWidth="150rpx" required :borderBottom="true">
					<up-input v-model="form.name" placeholder="请填写姓名" border="none"></up-input>
				</up-form-item>
				<up-form-item label="手机号" prop="phone" labelWidth="150rpx" required :borderBottom="true">
					<up-input v-model="form.phone" placeholder="请填写手机号" border="none"></up-input>
				</up-form-item>
				<up-form-item label="验证码" prop="authCode" labelWidth="150rpx" required :borderBottom="true">
					<up-input v-model="form.authCode" placeholder="请填写验证码" border="none"></up-input>
					<template #right>
						<text class="codeT" @click="getVerificationCode">{{ countdownText }}</text>
					</template>
				</up-form-item>
			</up-form>
		</view>
		<view class="conRule p20">
			<view class="conRuleItem">1. 上传清晰的学生卡或学生证，包括：姓名、学号、照片等，请勿涂抹、遮挡。</view>
			<view class="conRuleItem">2. 新生可使用录取通知书临时认证。</view>
			<view class="conRuleItem">3. 禁止借用他人证件，一经发现永久禁言。</view>
		</view>
		<view class="identityImg dis" @click="uploadImgFun">
			<template v-if="idImgUrl">
				<image :src="idImgUrl" mode="aspectFill"></image>
				<view class="offImg" @click.stop="delImg">x</view>
			</template>
			<view class="img" v-else>
				<image src="/pages/static/11.png" mode=""></image>
			</view>
		</view>
		<view class="forumRule dis">
			<up-checkbox-group v-model="radiovalue1" placement="column">
				<up-checkbox label="" name="1"></up-checkbox>
			</up-checkbox-group>
			<view class="forumRuleCon">
				我已阅读并同意
				<text class="taxtColo">《论坛协议》</text>
				与
				<text class="taxtColo">《隐私政策》</text>
			</view>
		</view>
		<view class="okBut" v-if="radiovalue1.length == 0">提交认证</view>
		<view class="okButAct" v-else @click="submit">提交认证</view>
	</view>
	<view class="haveData p30" v-else>
		<view class="formData">
			<view class="item dis">
				<view class="lable">认证学校:</view>
				<view class="value">{{ haveData.departmentName }}</view>
			</view>
			<view class="item dis">
				<view class="lable">姓名:</view>
				<view class="value">{{ haveData.name }}</view>
			</view>
			<view class="item dis">
				<view class="lable">手机号:</view>
				<view class="value">{{ haveData.phone }}</view>
			</view>
			<view class="item dis">
				<view class="lable">证件:</view>
				<view class="value">
					<view class="valImg">
						<image :src="haveData.credential" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="item dis">
				<view class="lable">审核状态:</view>
				<view class="value">
					<view class="valType" :class="auditStatus == 2 ? 'err' : auditStatus == 1 ? 'succeed' : ''">
						{{ auditStatus == 2 ? '审核不通过' : auditStatus == 0 ? '待审核' : '审核通过' }}
					</view>
				</view>
			</view>
			<view class="item dis" v-if="auditStatus == 2 && haveData.rejectReason">
				<view class="lable">驳回原因:</view>
				<view class="value">{{ haveData.rejectReason }}</view>
			</view>
		</view>
		<view class="formBut" @click="againBut">{{ auditStatus == 2 ? '重新提交' : '返回' }}</view>
	</view>
	<up-modal content="提交成功，待审核" title="提示" :show="show" contentTextAlign="center" confirmButtonShape="circle">
		<template #confirmButton>
			<view class="custom_btn" @click="handleConfirm">确定</view>
		</template>
	</up-modal>
</template>

<script setup>
import { codeSend, idApply, identityAxios } from '@/config/api.js';
import { uploadImage } from '@/util/util.js';
import { ref, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
const current = ref(1);
const schoolInfo = ref({});
onShow(() => {
	console.log('onShow');
	const schoolStr = uni.getStorageSync('schoolInfo');
	if (!schoolStr) {
		uni.navigateTo({
			url: '/pages/selectSchool/index?isIndex=1'
		});
	} else {
		const school = JSON.parse(schoolStr);
		schoolInfo.value = school;
	}
	identityAxiosFun();
});
const haveData = ref({});
const formDom = ref(null);
const form = ref({
	name: '',
	phone: '',
	authCode: '',
	mode: ''
});
const rules = ref({
	name: {
		type: 'string',
		required: true,
		message: '请填写姓名',
		trigger: ['blur', 'change']
	},
	phone: {
		type: 'string',
		required: true,
		message: '请填写手机号',
		trigger: ['blur', 'change']
	},
	authCode: {
		type: 'string',
		required: true,
		message: '请填写验证码',
		trigger: ['blur', 'change']
	}
});
const auditStatus = ref(0); // 0待审核 1审核通过 2审核不通过
// 获取身份认证信息
const identityAxiosFun = async () => {
	const res = await identityAxios();
	// console.log(res);
	if (res.code == 0) {
		haveData.value = res.data.userIdentity;
		auditStatus.value = res.data.userIdentity.auditStatus;
	} else {
		haveData.value = false;
	}
};
const againBut = () => {
	if (auditStatus.value == 0 || auditStatus.value == 1) {
		goBack();
	} else {
		form.value = {
			name: haveData.value.name,
			phone: haveData.value.phone,
			authCode: '',
			mode: ''
		};
		idImgUrl.value = haveData.value.credential;
		haveData.value = false;
	}
};

// 获取验证码功能
let timer = null;
const countdown = ref(0);
const isPhoneValid = computed(() => {
	return /^1[3-9]\d{9}$/.test(form.value.phone);
});
const isCounting = computed(() => {
	return countdown.value > 0;
});
const countdownText = computed(() => {
	return isCounting.value ? `${countdown.value}s后重新获取` : '获取验证码';
});
// 获取验证码
const getVerificationCode = async () => {
	if (!isPhoneValid.value) {
		uni.showToast({
			title: '请输入正确的手机号码',
			icon: 'none'
		});
		return;
	}
	if (isCounting.value) return;
	// 开始倒计时
	countdown.value = 30;
	timer = setInterval(() => {
		countdown.value--;
		if (countdown.value <= 0) {
			clearInterval(timer);
		}
	}, 1000);
	try {
		uni.showLoading({ title: '发送中...' });
		// 这里替换为实际的API调用
		const res = await codeSend({ account: form.value.phone });
		console.log(res);
		uni.hideLoading();
		uni.showToast({
			title: '验证码已发送',
			icon: 'success'
		});
		if (res.code == 0) {
			form.value.mode = res.data.mode;
		} else {
			console.error('验证码发送失败:', error);
		}
	} catch (error) {
		uni.hideLoading();
		uni.showToast({
			title: '发送失败，请重试',
			icon: 'none'
		});
		console.error('验证码发送失败:', error);
		// 发送失败时重置倒计时
		clearInterval(timer);
		countdown.value = 0;
	}
};

// 论坛协议
const radiovalue1 = ref([]);

// 提交
const show = ref(false);
const submit = () => {
	if (!idImgUrl.value) {
		uni.showToast({
			title: '请上传证件',
			icon: 'none'
		});
		return;
	}
	formDom.value.validate().then(async (isOk) => {
		if (isOk) {
			const data = {
				departmentId: schoolInfo.value.schoolId,
				name: form.value.name,
				phone: form.value.phone,
				code: form.value.authCode,
				mode: form.value.mode,
				credential: idImgUrl.value
			};
			const res = await idApply(data);
			if (res.code == 0) {
				show.value = true;
			} else if (res.code == 400) {
				uni.$u.toast('验证码错误');
			} else {
				uni.$u.toast('提交失败');
			}
		}
	});
};
const handleConfirm = () => {
	show.value = false;
	goBack();
};
const goBack = () => {
	uni.navigateBack({
		delta: 1
	});
};

// 上传图片
const idImgUrl = ref('');
const uploadImgFun = async () => {
	const res = await uploadImage();
	if (res.code == 0) {
		idImgUrl.value = res.data.imgUrl;
	} else {
		uni.showToast({
			title: res.message,
			duration: 2000
		});
	}
};
const delImg = () => {
	idImgUrl.value = '';
};
</script>

<style lang="scss" scoped>
.identity {
	.topRule {
		background-color: #fdf7eb;
		color: #e8810d;
	}
	.form {
		padding: 40rpx;
	}
	.conRule {
		background: #fff3f1;
		color: #a94442;
	}
	.identityImg {
		position: relative;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: 30rpx;
		width: 90%;
		height: 240rpx;
		border-radius: 10rpx;
		background: #f7f8fa;
		overflow: hidden;
		.img {
			width: 108rpx;
			height: 108rpx;
		}
		.offImg {
			position: absolute;
			right: 0;
			top: 0;
			width: 40rpx;
			height: 40rpx;
			line-height: 30rpx;
			font-size: 26rpx;
			text-align: center;
			border-radius: 0rpx 10rpx 0rpx 40rpx;
			background: #000;
			color: #fff;
		}
	}
	.forumRule {
		padding: 30rpx;
		.forumRuleCon {
			padding-top: 5rpx;
			.taxtColo {
				color: #1ba7f2;
			}
		}
	}
	.okBut {
		margin: 0 auto;
		padding: 20rpx 0;
		width: 60%;
		border-radius: 50rpx;
		background-color: #7fdffd;
		color: #fff;
		text-align: center;
	}
	.okButAct {
		margin: 0 auto;
		padding: 20rpx 0;
		width: 60%;
		border-radius: 50rpx;
		color: #fff;
		text-align: center;
		background-color: #00aef7;
	}
}
.haveData {
	.formData {
		width: 100%;
		.item {
			align-items: center;
			border-bottom: 2rpx solid #f5f6f8;
			.lable {
				width: 190rpx;
				line-height: 90rpx;
				color: #646566;
			}
			.value {
				color: #969799;
				.valImg {
					margin: 30rpx 0;
					width: 152rpx;
					height: 152rpx;
					border-radius: 10rpx;
					overflow: hidden;
					background-color: #8eaefa;
				}
				.valType {
					margin: 30rpx 0;
					padding: 0 10rpx;
					line-height: 43rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					color: #00a8f6;
					border: 2rpx solid #00a8f6;
				}
				.err {
					color: #fa2c19;
					border: 2rpx solid #fa2c19;
				}
				.succeed {
					color: #07c160;
					border: 2rpx solid #07c160;
				}
			}
		}
	}
	.formBut {
		margin: 0 auto;
		margin-top: 30rpx;
		width: 80%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 35rpx;
		color: #fff;
		background-color: #00a8f6;
	}
}
</style>
<style>
.custom_btn {
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 35rpx;
	text-align: center;
	color: #fff;
	background-color: #3391e6;
}
.codeT {
	color: #0087e0;
}
image {
	width: 100%;
	height: 100%;
}
.u-input {
	background-color: #fff !important;
}
</style>
